<template>
	<view style="height: 100%;">
		<view class="search-wrapper rel border-b">
			<view class="search flex flex-center">
				<text class="iconfont icon-sousuo1"></text>
				<input class="ml5" :placeholder="placeholder" :value="input_value" @input="inputHandle"></input>
				<text class="iconfont icon-cha1 ml5 rel" v-if="input_value != ''" @click.stop="clearInput"></text>
			</view>
		</view>

		<scroll-view scroll-y="true" style="height:100%;" :scroll-into-view="scroll_to">
			<view class="address-wrapper" v-if="address_info.now_city && status == ''">
				<view class="title">
					<lang keywords="你所在的地区"></lang>
				</view>
				<view class="flex flex-between flex-center now mb10" v-if="address_info.now_city[0].child.length > 0">
					<text class="address border" @click.stop="selectNowAddress" :data-name="address_info.now_city[0].top_city.area_name">{{ address_info.now_city[0].top_city.area_name + ( address_info.now_city[0].top_city.area_name == address_info.now_city[0].area_name ? '' : '-' + address_info.now_city[0].area_name)}}</text>
					<view class="btn gray" @click.stop="showArea" data-type="now" :data-name="address_info.now_city[0].top_city.area_name" v-if=" pageFrom != 'kuaidian'">
						<lang keywords="选择区县"></lang>
						<text class="iconfont icon-jiantou1 ml5" v-if="show_area == 'now'"></text>
						<text class="iconfont icon-xiala ml5" v-else></text>
					</view>
				</view>
				<view class="flex flex-wrap flex-center select-box" v-if="show_area == 'now'">
					<view :class=" 'block-in item border ' + ( address_info.now_city[0].top_city.area_name == address_info.now_city[0].area_name ? 'bg-gray' : '')"
						   @click.stop="selectArea($event)" data-word="now" data-index="all" >
						<lang keywords="全城" ></lang>
					</view>
					<text :class="'item border ' + ( item.area_id == address_info.now_city[0].area_id ? 'bg-gray' : '')" v-for="(item, index) in address_info.now_city[0].child"
					 :key="index" @click.stop="selectArea($event)" data-word="now" :data-index="index">{{item.area_name}}</text>
				</view>
				
				<block v-if="history_list.length > 0 && pageFrom != 'kuaidian'">
				<view class="title" >
					<lang keywords="历史访问目的地"></lang>
				</view>
				<view class="flex flex-wrap flex-center select-box" >
					<text class="item border" v-for="(item, index) in history_list" :key="index" @click.stop="selectArea($event)" data-word="history"
					 :data-index="index">{{item.area_name}}</text>
				</view>
				</block>

				<view v-for="(word, index) in address_info.aCity" :key="index">
					<view class="title" :id="word">{{word}}</view>
					<view class="rel border-b select-box" v-for="(city, top_index) in address_info.all_city[word]" :key="top_index">
						<block v-if="city.child.length > 0">
							<view class="flex flex-between flex-center" @click.stop="showArea($event)" :data-type="city.area_id" :data-name="city.area_name">
								<text class="name">{{city.area_name}}</text>
								<view class="btn" v-if=" pageFrom != 'kuaidian'">
									<text class="iconfont icon-jiantou1 gray" v-if="show_area == city.area_id"></text>
									<text class="iconfont icon-xiala gray" v-else></text>
								</view>
							</view>
							<view class="flex flex-wrap flex-center select-box pd10" v-if="show_area == city.area_id">
								<view class="block-in item border" @click.stop="selectArea($event)" :data-word="word" :data-index="top_index"
									 data-two="all">
									<lang keywords="全城" ></lang>
								</view>
								<text class="item border" v-for="(item, index) in city.child" :key="index" @click.stop="selectArea($event)" :data-word="word"
								 :data-index="top_index" :data-two="index">{{item.area_name}}</text>
							</view>
						</block>
						<block v-else>
							<view class="flex flex-between flex-center" @click.stop="selectArea($event)" :data-word="word" :data-index="top_index"
							 data-two="all">
								<text class="name">{{city.area_name}}</text>
							</view>
						</block>
					</view>
				</view>
			</view>

			<!-- 搜索列表 -->
			<view v-if="status == 'search'">
				<view class="search-list" v-if="search_list.length > 0">
					<view class="rel border-b item" v-for="(item, index) in search_list" :key="index" @click.stop="selectArea($event)"
					 data-word="search" :data-index="index">{{item.now_area_name + (item.now_area_name == item.area_name ? '' : ' ' + item.area_name)}}</view>
				</view>

				<view class="search-empty" v-if="is_search && search_list.length == 0">
					<lang keywords="无结果"></lang>
				</view>
			</view>


		</scroll-view>


		<view class="word-list" v-if="status == ''" catchtouchmove="touchmove">
			<text class="item" v-for="(item, index) in address_info.aCity" :key="index" @click.stop="selectWord($event)" :data-word="item">{{item}}</text>
		</view>
		<view class="wrod-popup" v-if="scroll_to != ''">{{scroll_to}}</view>
	</view>
</template>

<script>
	// pages/index/select_address.js
	import common from '../../utils/common.js'
	var app = getApp();
	var _this, wordtimer;
	// 获取区域列表信息
	const getAddress = () => {
		common.post('Changecity&a=index', {
			now_city: _this.config.area_id
		}, data => {
			if (data) {
				delete data.all_province;
				delete data.hot_city;

				_this.address_info = data

				getWordSite();
			}
		});
	};
	const getArea = area_id => {
		common.post('Changecity&a=get_area', {
			area_id: area_id,
			noTip: true
		}, data => {});
	};
	const search = () => {
		if (_this.input_value != '' && _this.status == '') {
			_this.status = 'search'
		}

		common.post('Changecity&a=search_area', {
			search: _this.input_value
		}, data => {
			console.log('搜索地点结果', data);

			_this.is_search = true
			_this.search_list = data
		});
	};
	const getWordSite = () => {
		setTimeout(() => {
			wx.createSelectorQuery().selectAll('.word-list .item').fields({
				dataset: true,
				rect: true,
				size: true
			}, function(res) {
				_this.word_sites = res;
			}).exec();
		}, 1000);
	};

	export default {
		data() {
			return {
				config: {},
				show_area: '',
				address_info: {},
				area_list: [],
				scroll_to: '',
				show_word: '',
				input_value: '',
				input_timer: '',
				status: '',
				search_list: [],
				word_sites: [],
				touches: '',
				history_list: [],
				placeholder: '输入城市名、拼音或字母查询',
				is_search: false,
				pageFrom: ''
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			_this = this;
			common.setMainColor(_this);
			wx.setNavigationBarTitle({
				title: common.changeTxt('选择城市')
			});
			_this.placeholder = common.changeTxt(_this.placeholder)
			getAddress();
			wx.getStorage({
				key: 'history_area',
				success: res => {
					_this.history_list = res.data
				}
			});
			if (options.from) {
				this.pageFrom = options.from
			}
		},
		methods: {
			selectNowAddress (e) {
				if (this.pageFrom == 'kuaidian') {
					console.log('222222', e.currentTarget.dataset.name)
					uni.setStorageSync('kuaidian_city', {city_name: e.currentTarget.dataset.name})
					common.navigateBack()
				}
			},
			// 显示所选城市的区域
			showArea(e) {
				if (this.pageFrom == 'kuaidian') {
					console.log('222222', e.currentTarget.dataset.name)
					uni.setStorageSync('kuaidian_city', {city_name: e.currentTarget.dataset.name})
					common.navigateBack()
					return
				}
				
				var type = e.currentTarget.dataset.type;
				if (type == _this.show_area) {
					type = '';
				}

				_this.show_area = type

				if (e.currentTarget.dataset.tag && type != '') {
					getArea(type);
				}
			},

			// 选择首字母
			selectWord(e) {
				clearTimeout(wordtimer);
				var word = e.currentTarget.dataset.word;

				_this.scroll_to = word

				wordtimer = setTimeout(() => {
					_this.scroll_to = ''
				}, 1000);
			},

			touchmove(e) {
				var list = _this.word_sites;
				var moveY = e.touches[0].clientY;
				var rY = moveY - list[0].top;

				if (rY >= 0) {
					var index = Math.ceil(rY / list[0].height - 1);

					if (0 <= index && index < list.length) {
						clearTimeout(wordtimer);

						_this.scroll_to = list[index].dataset.word
					}

					wordtimer = setTimeout(() => {
						_this.scroll_to = ''
					}, 1000);
				}
			},

			selectArea(e) {
				console.log('选择全城', e)
				var word = e.currentTarget.dataset.word;
				var index = e.currentTarget.dataset.index;
				var address = _this.address_info;
				var obj = {};

				if (word == 'now') {
					if (index == 'all') {
						obj = address.now_city[0].top_city;
					} else {
						obj = address.now_city[0].child[index];
					}

					obj.top_area_id = obj.city_id = address.now_city[0].top_city.area_id;
					obj.top_area_name = obj.city_name = address.now_city[0].top_city.area_name;
				} else if (word == 'search') {
					obj.area_id = _this.search_list[index].now_area_id;
					obj.area_name = _this.search_list[index].now_area_name;

					if (_this.search_list[index].now_area_id == _this.search_list[index].area_id) {
						obj.city_id = obj.top_area_id = obj.area_id;
						obj.city_name = obj.top_area_name = obj.area_name;
					} else {
						obj.city_id = obj.top_area_id = _this.search_list[index].area_id;
						obj.city_name = obj.top_area_name = _this.search_list[index].area_name;
					}
				} else if (word == 'history') {
					obj = _this.history_list[index];
				} else {
					var two = e.currentTarget.dataset.two;

					if (two == 'all') {
						obj.area_id = obj.city_id = obj.top_area_id = address.all_city[word][index].area_id;
						obj.area_name = obj.city_name = obj.top_area_name = address.all_city[word][index].area_name;
					} else {
						obj = address.all_city[word][index].child[two];
						obj.city_id = obj.top_area_id = address.all_city[word][index].area_id;
						obj.city_name = obj.top_area_name = address.all_city[word][index].area_name;
					}
				}

				var history_list = _this.history_list;
				history_list = history_list.filter(item => item.area_id != obj.area_id);
				history_list.unshift(obj);

				if (history_list.length > 6) {
					history_list = history_list.slice(0, 6);
				}
				wx.setStorage({
					key: 'history_area',
					data: history_list
				});
				
				if (this.pageFrom == 'kuaidian') {
					uni.setStorageSync('kuaidian_city', obj)
				} else {
					uni.setStorageSync('now_city_info', obj)
					console.log('now_city_info', obj)
					
					//#ifdef H5
						common.$dataStorage.cookie.set('now_city', obj.city_id, 36500)
					//#endif
				}
				
				common.navigateBack()
				
			},

			// 搜索输入
			inputHandle(e) {
				clearTimeout(_this.input_timer);

				if (e.detail.value != '') {
					_this.input_value = e.detail.value

					_this.input_timer = setTimeout(() => {
						search();
					}, 1000);
				} else {
					_this.input_value = ''
					_this.status = ''
				}

				_this.is_search = false
				_this.search_list = []
			},

			// 清空input
			clearInput() {
				_this.input_value = ''
				_this.status = ''
			}
		}
	};
</script>
<style>
	page {
		background: #fff;
		overflow: hidden;
		width: 100%;
		height: 100%;
		padding-top: 100rpx;
		box-sizing: border-box;
	}

	.rel {
		position: relative;
	}

	.flex {
		display: flex;
	}

	.flex-center {
		align-items: center;
	}

	.flex-between {
		justify-content: space-between;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.ml5 {
		margin-left: 5px;
	}

	.mr10 {
		margin-right: 20rpx;
	}

	.pd10 {
		padding-bottom: 15rpx;
	}

	.gray {
		color: #999;
	}

	.border-b::after {
		content: '';
		position: absolute;
		background: #e5e5e5;
		bottom: 0;
		left: 0;
		height: 1px;
		width: 100%;
		transform: scaleY(0.5);
	}

	.bg-gray {
		background: #f8f8f8;
	}

	.border {
		position: relative;
	}

	.border::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #e5e5e5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: left top;
		transform-origin: left top;
		border-radius: 4px;
	}

	@media screen and (-webkit-min-device-pixel-ratio: 3) {
		.border::after {
			width: 300%;
			height: 300%;
			-webkit-transform: scale(0.33333333333333333333333);
			transform: scale(0.33333333333333333333333);
		}

		.border-b::after {
			transform: scaleY(0.33333333333333333333333);
		}
	}

	@media screen and (-webkit-min-device-pixel-ratio: 4) {
		.border::after {
			width: 400%;
			height: 400%;
			-webkit-transform: scale(0.25);
			transform: scale(0.25);
		}

		.border-b::after {
			transform: scaleY(0.25);
		}
	}


	.search-wrapper {
		padding: 20rpx 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 10;
	}

	.search {
		color: #999;
		background: #f4f4f4;
		font-size: 28rpx;
		border-radius: 20px;
		height: 60rpx;
		padding: 0 20rpx;
		flex-grow: 1;
		box-sizing: border-box;
	}

	.search .iconfont {
		font-size: 28rpx;
	}

	.search .icon-cha1::after {
		content: '';
		position: absolute;
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
	}

	.search input {
		flex-grow: 1;
	}

	.address-wrapper {
		padding: 0 60rpx 0 20rpx;
	}

	.address-wrapper .title {
		color: #999;
		font-size: 28rpx;
		height: 72rpx;
		line-height: 72rpx;
	}

	.address-wrapper .now {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.address-wrapper .now .address {
		padding: 16rpx 40rpx;
		border-radius: 2px;
	}

	.select-box.border-b::after {
		right: 60rpx;
	}

	.select-box .item {
		width: calc(32% - 20rpx);
		margin-right: 20rpx;
		font-size: 28rpx;
		text-align: center;
		padding: 16rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 20rpx;
	}

	.select-box .name {
		padding: 20rpx 0;
		font-size: 28rpx;
	}

	.select-box .iconfont,
	.address-wrapper .now .iconfont {
		font-size: 16px;
	}

	.word-list {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #999;
		width: 60rpx;
		text-align: center;
		position: fixed;
		right: 0;
		top: 50px;
		bottom: 0;
		justify-content: center;
		z-index: 999;
	}

	.word-list text {
		padding: 2rpx 0;
	}

	.wrod-popup {
		width: 140rpx;
		height: 140rpx;
		line-height: 140rpx;
		background: rgba(0, 0, 0, .7);
		color: #fff;
		text-align: center;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.search-list {
		position: relative;
	}

	.search-list .item {
		font-size: 28rpx;
		padding: 20rpx 0;
		margin-left: 20rpx;
	}

	.search-empty {
		text-align: center;
		padding: 60rpx;
		font-size: 32rpx;
	}
</style>
